import './Scss/Inspection.scss'
import { useRequest, useSetState } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../../Common/Api'
import { Gauge } from '@ant-design/plots'

export const Inspection001 = () => {
    const [Data, setData] = useState([
        { uuid: '1', title: '下单数', value: 0, color: '#D7E492' },
        { uuid: '2', title: '已整改', value: 0, color: '#97FFC8' },
        { uuid: '3', title: '合格数', value: 0, color: '#8FD6FF' },
    ])

    const { runAsync: getSecurityStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { ok, submitted, handled, handling, notOk } = res
            const one = handling + notOk + ok + handled + submitted
            const two = handling + notOk + ok
            const thr = handled + submitted

            setChartsData({ percent: two / one })
            setData([
                { uuid: '1', title: '下单数', state: '', value: one, color: '#6CEFDC', icon: '下单数量.png' },
                { uuid: '2', title: '已整改', state: '', value: two, color: '#6CD2EF', icon: '已整改.png' },
                { uuid: '3', title: '未整改', state: '', value: thr, color: '#99FFE6', icon: '整改中.png' },
            ])
        },
    })

    const [ChartsData, setChartsData] = useSetState({
        autoFit: false,
        height: 100,
        percent: 0.86,
        radius: 0.9,
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
        indicator: null,
        statistic: {
            title: {
                offsetY: -25,
                style: { fontSize: '35px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
            },
            content: {
                style: { fontSize: '16px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                formatter: () => '整改率',
            },
        },
        gaugeStyle: { lineCap: 'round' },
    })

    useEffect(() => {
        getSecurityStat({ url: 'getSecurityStat' })
    }, [getSecurityStat])

    return (
        <div className="Inspection001">
            <Gauge {...ChartsData} />
            <div className="Table">
                {Data.map(({ uuid, title, value, color }) => (
                    <div key={uuid}>
                        <div style={{ color }}>{title}</div>
                        <div>{value} 项</div>
                    </div>
                ))}
            </div>
        </div>
    )
}
